<template>
    <div>
        <div class="list" >
            <ul v-for="(item,index) in list" :key="index">
                <li>
                    <img :src="item.img" alt="" class="img1">
                    <p>{{item.text}}</p>
                    <span class="span1">{{item.bao}}</span>
                    <div class="bottom">
                        <span class="span2">{{item.price}}</span>
                        <div class="right">
                            <img :src="item.comimg" alt="" class="img2">
                            <span class="span3">{{item.commodity}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        img:"http://pic2.ymatou.com/2021/09/18/18/62f00c41-a9dd-4d0b-872a-96e91e2ba6ee_1_1_n_w_lb.jpg",
                        text:"泰国INWA樱幻玫瑰护发精油30粒/盒 免洗护发烫染改善干枯毛燥",
                        bao:"包邮包税",
                        price:"¥ 48.80",
                        comimg:"http://img.ymatou.com/app/flag/circle/Thailand.png",
                        commodity:"泰国"
                    },
                    {
                        img:"http://pic1.ymatou.com/G04/shangou/M03/16/C8/CgzUC2DJrIGAEYkkAAIWO3yS5QQ601_1_1_n_w_lb.jpg",
                        text:"【2盒】纽西之谜免洗睡眠面膜补水保湿提拉紧致夜间修护提亮肤色",
                        bao:"包邮包税",
                        price:"¥ 69.00",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    },
                    {
                        img:"http://pic1.ymatou.com/G03/shangou/M09/95/B9/CgzUH2B0EN-AfVu-AAGkAMHOTt0452_1_1_n_w_lb.jpg",
                        text:"送刷纽西之谜清洁面膜深层清洁毛孔去黑头涂抹式新西兰火山泥膜泥",
                        bao:"包邮包税",
                        price:"¥ 49.00",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    },
                    {
                        img:"http://pic2.ymatou.com/2021/08/06/14/8e77abfc-d2b9-4572-911f-cbff0175f2fc_1_1_n_w_lb.jpg",
                        text:"莱蔻摩洛哥护发精油女防毛躁柔顺免洗发膜香味持久留香改善烫卷发",
                        bao:"包邮包税",
                        price:"¥ 39.90",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    },
                    {
                        img:"http://pic2.ymatou.com/2021/09/18/18/62f00c41-a9dd-4d0b-872a-96e91e2ba6ee_1_1_n_w_lb.jpg",
                        text:"泰国INWA樱幻玫瑰护发精油30粒/盒 免洗护发烫染改善干枯毛燥",
                        bao:"包邮包税",
                        price:"¥ 48.80",
                        comimg:"http://img.ymatou.com/app/flag/circle/Thailand.png",
                        commodity:"泰国"
                    },
                    {
                        img:"http://pic1.ymatou.com/G04/shangou/M03/16/C8/CgzUC2DJrIGAEYkkAAIWO3yS5QQ601_1_1_n_w_lb.jpg",
                        text:"【2盒】纽西之谜免洗睡眠面膜补水保湿提拉紧致夜间修护提亮肤色",
                        bao:"包邮包税",
                        price:"¥ 69.00",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    },
                    {
                        img:"http://pic1.ymatou.com/G03/shangou/M09/95/B9/CgzUH2B0EN-AfVu-AAGkAMHOTt0452_1_1_n_w_lb.jpg",
                        text:"送刷纽西之谜清洁面膜深层清洁毛孔去黑头涂抹式新西兰火山泥膜泥",
                        bao:"包邮包税",
                        price:"¥ 49.00",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    },
                    {
                        img:"http://pic2.ymatou.com/2021/08/06/14/8e77abfc-d2b9-4572-911f-cbff0175f2fc_1_1_n_w_lb.jpg",
                        text:"莱蔻摩洛哥护发精油女防毛躁柔顺免洗发膜香味持久留香改善烫卷发",
                        bao:"包邮包税",
                        price:"¥ 39.90",
                        comimg:"http://img.ymatou.com/app/flag/circle/importtrade.png",
                        commodity:"进口贸易"
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
.list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    ul{
        display: flex;
        width: 46%;
        background-color: white;
        margin-top: 20px;
        li{
            .img1{
                width: 300px;
            }
            p{
                font-size: 24px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .span1{
                display: inline-block;
                border: 1px solid #cc3333;
                padding: 0px 10px;
                color: #cc3333;
                border-radius: 20px;
            }
            .bottom{
                display: flex;
                justify-content: space-around;
                align-items: center;
                .span2{
                    font-size: 32px;
                    color: #cc3333;
                }
                .right{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    
                    .img2{
                        width: 30px;
                        // margin-: 30px;
                    }
                    .span3{
                        margin-left: 20px;
                    }
                }
            }
        }
    }
}
</style>